import React, { Component } from 'react'

// 函数子组件

function ChildFn(props) {
  console.log('函数组件接收数据：', props)
  return (
    <div>
      <h1>我是函数子组件</h1>
      <p>{props.abc}</p>
    </div>
  )
}

// 类组件子组件
class Child extends Component {
  // constructor(props) {
  //   super(props)
  //   console.log(this.props)
  // }

  state = {
    // 把这个数据传递给子组件？=》回调函数=》接收数据
    a: 123,
    // b:2
  }

  render() {
    console.log('类组件接收数据：', this.props)
    // this.props.abc = 100
    return (
      <div>
        <h1>我是类子组件</h1>
        <p>{this.props.count}</p>
        {this.props.tpl}
        <button
          onClick={() => {
            this.props.fn(this.state.a, 1000)
          }}>
          调用父组件的方法
        </button>
      </div>
    )
  }
}

// 父组件
class Index extends Component {
  state = {
    count: 0,
    obj: { a: 1 },
    arr: [],
    // 状态提升
    b: 0,
  }

  // 接收子组件的数据（回调函数）
  fnc = (a, b) => {
    console.log('我是父组件的方法！接收子组件数据：', a, b)
  }

  render() {
    return (
      <div>
        <h1>组件通信</h1>
        <Child
          b={this.state.b}
          count={this.state.count}
          fn={this.fnc}
          obj={this.state.obj}
          abc="123"
          tpl={<h1>我是模版</h1>}
        />
        <hr />
        <ChildFn
          b={this.state.b}
          count={this.state.count}
          arr={this.state.arr}
          abc="123"
        />
      </div>
    )
  }
}

export default Index
